<template>
	<view>
		<form @submit="formSubmit">
			<view class="col-p">
				<view class="bg-white col-pl col-pr b-radius">
					<view class="col-pt ta-center">请上传身份证照片</view>
					<view class="flex-row col-pt col-pb ta-center">
						<view class="flex-grow-1">
							<view class="upload-box" @tap="doUploadFile('front')">
								<uni-icons type="camera-filled" size="30" color="#dcdee0" v-if="!frontImg"></uni-icons>
								<image :src="frontImg" class="upload-img" v-else></image>
							</view>
							<view class="col-mt">身份证人像面</view>
						</view>
						<view class="flex-grow-1">
							<view class="upload-box" @tap="doUploadFile('back')">
								<uni-icons type="camera-filled" size="30" color="#dcdee0" v-if="!backImg"></uni-icons>
								<image :src="backImg" class="upload-img" v-else></image>
							</view>
							<view class="col-mt">身份证国徽面</view>
						</view>
					</view>
				</view>
				<view class="bg-white col-pl col-pr b-radius col-mt">
					<view class="col-pt col-pb border-b flex-row items-center">
						<view class="col-mr item-label">姓名</view>
						<view class="flex-grow-1">
							<input type="text" class="fs-default" placeholder="请输入姓名" v-model="formData.name" />
						</view>
					</view>
					<view class="col-pt col-pb border-b flex-row items-center">
						<view class="col-mr item-label">证件号码</view>
						<view class="flex-grow-1">
							<input type="text" maxlength="18" class="fs-default" placeholder="请输入证件号码" v-model="formData.id_no" />
						</view>
					</view>
					<view class="col-pt col-pb border-b flex-row items-center">
						<view class="col-mr item-label">银行卡号</view>
						<view class="flex-grow-1">
							<input type="number" maxlength="20" class="fs-default" placeholder="请输入银行卡号" v-model="formData.bank_card_no" />
						</view>
					</view>
					<view class="col-pt col-pb border-b flex-row items-center">
						<view class="col-mr item-label">手机号码</view>
						<view class="flex-grow-1">
							<input type="number" maxlength="11" class="fs-default" placeholder="请输入手机号码" v-model="formData.mobile" />
						</view>
					</view>
					<view class="col-pt col-pb flex-row items-center">
						<view class="col-mr item-label">验证码</view>
						<view class="flex-grow-1">
							<input type="number" maxlength="6" class="fs-default" placeholder="请输入验证码" v-model="formData.sms_code" />
						</view>
						<view @tap="handleSms" :class="disabled ? 'tc-gray' : 'tc-active'">{{codeTips}}</view>
					</view>
				</view>
			</view>
			<view class="col-p">
				<button type="primary" form-type="submit" class="btn">提交</button>
			</view>
		</form>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showToast,
		chooseImage,
		navigateTo,
		uploadFile,
		imageCompression
	} from "@/utils/modal.js"
	import {
		sendSms
	} from "@/api/index.js"
	import { useCounterStore } from '@/stores/index'
	const counterStore = useCounterStore()
	const formData = reactive({
		name: '',
		id_no: '',
		bank_card_no: '',
		mobile: '',
		sms_code: '',
		front_id_card_code: '',
		back_id_card_code: '',
		sms_trace_id: ''
	}) 
	const disabled = ref(false)
	const codeTips = ref('获取验证码')
	const frontImg = ref('')
	const backImg = ref('')
	
	/**
	 * 提交表单
	 */
	const formSubmit = () => {
		if (!formData.front_id_card_code) return showToast('请上传身份证人像面')
		if (!formData.back_id_card_code) return showToast('请上传身份证国徽面')
		if (!formData.name) return showToast('请输入姓名')
		let regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
		if (!regIdNo.test(formData.id_no)) return showToast('请输入证件号码')
		let regCardNo = /^\d{16,19}$/
		if (!regCardNo.test(formData.bank_card_no)) return showToast('请输入银行卡号')
		let regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/
		if (!regMobile.test(formData.mobile)) return showToast('请输入手机号')
		if (!formData.sms_trace_id) return showToast('请发送短信')
		if (!formData.sms_code) return showToast('请输入验证码')
		// 保存数据
		counterStore.setFormData(formData)
		// 跳转协议页面
		navigateTo('/pages/index/agreement')
	}
	/**
	 * 发送短信
	 */
	const handleSms = async () => {
	    let regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/
	    if (!regMobile.test(formData.mobile)) return showToast('请输入手机号')
	    let data = await sendSms({ 
	        mobile: formData.mobile,
			mch_id: counterStore.mchId,
			user_id: counterStore.userId
	    })
		formData.sms_trace_id = data.trace_id
		showToast('发送成功')
	    let time = 60;
	    disabled.value = true
	    let inter = setInterval(function() {
	        codeTips.value = '重新获取' + --time + 's';
	        if (time == -1) {
	            clearInterval(inter);
	            disabled.value = false;
	            codeTips.value = '获取验证码';
	        }
	    }, 1000);
	}
	/**
	 * 上传身份证照片
	 */
	const doUploadFile = async (type) => {
		let fileData = await chooseImage()
		let filePath = fileData.tempFilePaths[0]
		// 压缩图片
		let tempFilePath = await imageCompression(filePath)
		// 上传文件
		let data = await uploadFile(tempFilePath, {
			mch_id: counterStore.mchId,
			ocr_type: 1
		})
		// OCR识别
		let ocrInfo = data.ocr_info
		if (data.ocr_check) {
			if (ocrInfo.name) formData.name = ocrInfo.name
			if (ocrInfo.code) formData.id_no = ocrInfo.code
		}
		// 人像面
		if (type == 'front') {
			frontImg.value = filePath
			formData.front_id_card_code = data.file_code
		}
		// 国徽面
		if (type == 'back') {
			backImg.value = filePath
			formData.back_id_card_code = data.file_code
		}
	}
	onLoad((options) => {
		// 商户号赋值
		counterStore.setMchId(options.mch_id)
		// 用户ID赋值
		counterStore.setUserId(options.user_id)
	})
</script>

<style lang="scss">
	.item-label {
		width: 160rpx;
	}

	.item-label::before {
		content: '*';
		color: rgb(237, 23, 31);
		padding-right: 10rpx;
	}
	.upload-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin: auto;
		background-color: #f7f8fa;
	}
	.upload-img{
		width: 100%;
		height: 100%;
	}
</style>